<template>
  <advance-table
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    title=" "
    rowKey="id"
    :pagination="{
      current: page,
      pageSize: pageSize,
      total: total,
      showSizeChanger: true,
      showLessItems: true,
      showQuickJumper: true,
      showTotal: (total, range) =>
        `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
      onChange: onPageChange,
      onShowSizeChange: onSizeChange,
    }"
    @search="onSearch"
    @refresh="onRefresh"
  >
    <template
      v-for="(item, index) in slots"
      :slot="item"
      slot-scope="{ record }"
    >
      <span :key="index">
        <slot :name="item" :row="record"></slot>
      </span>
    </template>
  </advance-table>
</template>
<script>
import AdvanceTable from '@/components/table/advance/AdvanceTable'

export default {
  components: { AdvanceTable },
  props: {
    columns: Array,
    uri: String,
    slots: {
      type: Array,
      default: () => ['action'],
    },
  },
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      dataSource: [],
      pagination: {},
      conditions: {},
    }
  },
  mounted() {
    this.columns
      .filter((item) => item.dataType == 'range' && item.search.value)
      .forEach((item) => {
        if (item.search) {
          this.conditions[item.dataIndex] = item.search.value.map((val) => val)
        }
      })
    // console.log(search)
    this.fetch()
  },
  methods: {
    fetch() {
      this.loading = true

      this.axios
        .get(this.uri, {
          params: {
            page: this.page,
            page_size: this.pageSize,
            ...this.conditions,
          },
        })
        .then((res) => {
          const { list, total } = res.data.data
          this.dataSource = list
          this.total = total
          this.loading = false
          if (res.data.data.footer) {
            this.$emit('loaded', res.data.data.footer)
          }
        })
    },
    onSearch(conditions, searchOptions) {
      //   console.log(searchOptions)
      this.page = 1
      this.conditions = conditions
      this.fetch()
    },
    onSizeChange(current, size) {
      this.page = 1
      this.pageSize = size
      this.fetch()
    },
    onRefresh(conditions) {
      this.conditions = conditions
      this.fetch()
    },
    onReset(conditions) {
      this.conditions = conditions
      this.fetch()
    },
    onPageChange(page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      this.fetch()
    },
  },
}
</script>
